<template>
  <div class="login-container">
    <!-- 1.登录头部显示 -->
    <van-nav-bar title="登录">
      <van-icon slot="left" name="cross" @click="$router.back()" />
    </van-nav-bar>

    <!-- 登录表单 -->
    <van-form @submit="onSubmit" ref="loginForm">
      <!-- 第一个输入框 -->
      <van-field
        name="mobile"
        v-model="user.mobile"
        placeholder="请输入手机号"
        :rules="userFormRules.mobile"
        type="number"
        maxlength="11"
      >
        <i slot="left-icon" class="toutiao toutiao-shouji"></i>
      </van-field>
      <!-- 第二个输入框 -->
      <van-field
        v-model="user.code"
        name="code"
        placeholder="请输入验证码"
        :rules="userFormRules.code"
        type="number"
        maxlength="6"
      >
        <i slot="left-icon" class="toutiao toutiao-yanzhengma"></i>

        <template #button>
          <van-count-down
            :time="1000 * 60"
            format="ss s"
            v-if="isCountDownShow"
            @finish="isCountDownShow = false"
          />
          <van-button
            v-else
            size="small"
            class="send-sms-btn"
            plain
            round
            type="default"
            native-type="button"
            @click="onSendSms"
            >发送验证码</van-button
          >
        </template>
      </van-field>
      <!-- 第三部分是登录按钮 -->
      <div class="login-btn-wrap">
        <van-button class="login-btn" block type="info" native-type="submit"
          >登录</van-button
        >
      </div>
    </van-form>
    <!-- /登录表单 -->

  <p>
    万能验证码是: 246810 <br>
    主要功能在 首页和我的页面中的编辑按钮 <br>
    token有效期两小时 <br>
    有汉堡导航 , 文章详情,点赞评论收藏等功能 <br>
    点击"我的"页面中"编辑"按钮,可编辑资料 <br>
    点击搜索 有历史记录,搜索联想,搜索结果
  </p>
  </div>
</template>

<script>
// import { login, sendSms } from "@/api/user.js";
import { login } from "@/api/user.js";
export default {
  name: "LoginIndex",
  data() {
    return {
      user: {
        mobile: "15050314146", //手机号码
        code: "246810", //验证码
      },
      userFormRules: {
        mobile: [
          { required: true, message: "请输入手机号码" },
          { pattern: /^1[3-9]\d{9}$/, message: "手机号码不正确" },
        ],
        code: [
          { required: true, message: "请输入验证码" },
          { pattern: /^\d{6}$/, message: "验证码输入错误!" },
        ],
      },
      isCountDownShow: false,
    };
  },
  methods: {
    async onSubmit() {
      this.$toast.loading({
        message: "登录中...",
        forbidClick: true,
        duration: 500,
      });
      // 1.获取表单数据
      const user = this.user;
      // 2.表单验证
      // 3.提交表单 请求登录
      try {
        const { data } = await login(user);
        // console.log(data.data);
        // 把token提交到 vuex;
        this.$store.commit("setUser", data.data);
        this.$toast.success("登录成功");
        this.$router.back(); //跳转页面
      } catch (err) {
        if (err.response.status == 400) {
          this.$toast.fail("登录失败验证码错误");
        } else {
          this.$toast.fail("失败,请稍后重试");
        }
      }
      // 4.根据请求 响应结果 处理后续操作;
    },
    //1. 点击发送验证码的时候 必须写入手机号码, 否则不发送请求;
    // 在form标签中定义ref 然后调用this.refs.form中的ref.validator("验证的名字");//标签中的name值;
    async onSendSms() {
      try {
        // 如果不写手机号码 则 不往下执行 , 验证失败!;
        await this.$refs.loginForm.validate("mobile"); //这个mobile就是手机号码输入框中的值;
      } catch (err) {
        return console.log("验证失败");
      }
      this.isCountDownShow = true;
      //2. 发送验证码
      try {
        // const res =
        // await sendSms(this.user.mobile);
        // this.$toast("验证码发送成功!");
        this.$toast("暂不支持验证码!")
        // console.log(res);
      } catch (err) {
        // 当一分钟 多次点击 发送验证码 一分钟之内只能发送一次 是后台处理的 前端不用处理!
        // 那么不会再显示倒计时! 所以要把isCountDownShow变成false;
        this.isCountDownShow = false;
        if (err.message.status == 429) {
          this.$toast("发送太频繁,请稍后再试!");
        } else {
          this.$toast("验证码发送失败");
        }
      }
    },
  },
};
</script>

<style scoped lang="less">
.login-container {
  .toutiao-shouji,
  .toutiao-yanzhengma {
    font-size: 37px;
    font-weight: bold;
  }
  .send-sms-btn {
    background-color: #ededed;
    width: 172px;
    height: 56px;
    line-height: 56px;
  }
  .login-btn-wrap {
    padding: 53px 33px;
  }
  .login-btn {
    background-color: #6db4fb;
  }
  .van-icon-cross {
    color: #fff;
  }
}
</style>
